<template>
    <div class="youxia-div">
        <div class="youxia-out1 youxia-out">
            <button class="youxia1 youxia">
                <span class="iconfont icon-xiaoxi"></span>
            </button>
        </div>
        <div class="youxia-out2 youxia-out">
            <button class="youxia2 youxia">
                <span class="iconfont icon-ellipsis"></span>
            </button>
        </div>
        <div class="youxia-out3 youxia-out" v-show="!isnone" @click="scrollToTop">
            <button class="youxia2 youxia">
                <span class="iconfont icon-huidaodingbu"></span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { debounce } from 'lodash-es';

const isnone = ref(true);

const handleScroll = debounce(() => {
    const scrollY = window.scrollY;
    isnone.value = scrollY <= 900;
}, 100);

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
};

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});
onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
@import url(../../assets/youxia.scss);
@import url(../../assets/iconfont/iconfont.css);
</style>